<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .container1 {
            height: 200px;
        }

        .container2 {
            height: 200px;
        }

        .container3 {
            height: 200px;
        }

        .container1 .box1 {
            background: red;
            display: block;
        }

        .container1 .box2 {
            background: blue;
            display: none;
        }

        .container1 .box3 {
            background: yellow;
            display: none;
        }

        .container2 .box1 {
            background: red;
            display: block;
        }

        .container2 .box2 {
            background: blue;
            display: none;
        }

        .container2 .box3 {
            background: yellow;
            display: none;
        }

        .container3 .box1 {
            background: red;
            display: block;
        }

        .container3 .box2 {
            background: blue;
            display: none;
        }

        .container3 .box3 {
            background: yellow;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container1">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

    <div class="container2">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <button class="next">点击我切换第二个选线卡下一页</button>

    <div class="container3">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <script>

        // 构造函数 
        function Tab(btns, divs) {
            this.btns = btns;  // 对象的属性
            this.divs = divs;
            let that = this;
            // 共性问题 
            this.btns.forEach((item, key) => {
                item.onclick = function () {
                    that.forDiv(key);
                }
            })
            // let obj = {}; // 加原料
            // obj.forDiv = forDiv;  // 加工原料

            // return obj;  // 出厂 
        }

        Tab.prototype.forDiv = function(key){  // 对象的方法 
            this.divs.forEach((div, k) => {
                    if (key === k) {
                        // 点击按钮的索引 ，把和按钮索引一样的div 显示出来
                        div.style.display = "block";
                    } else {
                        // 把和点击按钮不同的 div 隐藏起来
                        div.style.display = "none";
                    }
                })
        }



        // 多个选项卡 ，提高复用性， 函数封装 ；
        let btns = document.querySelectorAll(".container1 button");
        let divs = document.querySelectorAll(".container1 div");
        new Tab(btns, divs);


        let btn2s = document.querySelectorAll(".container2 button");
        let div2s = document.querySelectorAll(".container2 div");
        let tab2 =  new Tab(btn2s, div2s);
        let nextBtn = document.querySelector(".next");
        let tabKey = 0;
        nextBtn.onclick = function(){
            tabKey++;
            if(tabKey>2){
                tabKey = 0;
            }
            tab2.forDiv(tabKey);
        }





        let btn3s = document.querySelectorAll(".container3 button");
        let div3s = document.querySelectorAll(".container3 div");
       let tab3 = new  Tab(btn3s, div3s);
       let num = 0;
       setInterval(()=>{
            num++;
            if(num>2){
                num=0;
            }
            tab3.forDiv(num);
       },1000)


       /* 
       第一个 ： 一个选项卡的实现 ，面向过程 。实现就行了 ；
       第二个 ： 多个选项卡 ----》封装 提高复用性 ；
       第三个 ：特性问题 
                1.通过传参 （参数少 ，参数多 函数臃肿，可读性查 ）
                2.把共性问题 和特性问题 分开处理
                    共性问题 放在 类里 
                    特性问题 放在对象里处理
        共性问题 工厂模式  构造函数  ES6里的类；

        分析事物中的对象  选项卡对象  -----》 行为（动词 ，方法） 和 特征（名词 属性）
        分析和事物或者程序有关的，和需求有关的特性 ；
        ------》  把属性特征 提取共性特征  抽象成类   ----》组织 逻辑关系  ---》 处理特性功能；
       
       定义一个类 ，实例化2只狗 ，特性 名称  性别  ，会叫 。 其中有只 小狗 间隔 2秒叫一次
       
       
       
       
       
       */


    </script>
</body>

</html>